<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交标签广场 - 多种样式标签列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4285F4;
            --secondary: #8E24AA;
            --success: #0F9D58;
            --warning: #FF9800;
            --danger: #F44336;
            --light: #F8F9FA;
            --dark: #202124;
            --gray: #5F6368;
            --light-gray: #E8EAED;
            --border-radius: 8px;
            --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
        }
        
        /* 内容区域 */
        .container {
            padding: 16px;
        }
        
        /* 标签样式切换 */
        .style-tabs {
            display: flex;
            background-color: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            margin-bottom: 16px;
            box-shadow: var(--card-shadow);
        }
        
        .style-tab {
            flex: 1;
            padding: 12px 0;
            background: none;
            border: none;
            font-size: 15px;
            font-weight: 500;
            color: var(--gray);
        }
        
        .style-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 标签列表通用样式 */
        .tag-section {
            margin-bottom: 24px;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .view-all {
            font-size: 14px;
            color: var(--primary);
            font-weight: normal;
        }
        
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        /* 基础标签样式 */
        .tag {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 1. 圆角填充标签 */
        .filled-tag {
            background-color: white;
            color: var(--dark);
            border: 1px solid var(--light-gray);
        }
        
        .filled-tag:hover, .filled-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 2. 彩色标签 */
        .color-tag.tech {
            background-color: rgba(66, 133, 244, 0.1);
            color: #4285F4;
            border: 1px solid rgba(66, 133, 244, 0.2);
        }
        
        .color-tag.life {
            background-color: rgba(15, 157, 88, 0.1);
            color: #0F9D58;
            border: 1px solid rgba(15, 157, 88, 0.2);
        }
        
        .color-tag.entertainment {
            background-color: rgba(142, 36, 170, 0.1);
            color: #8E24AA;
            border: 1px solid rgba(142, 36, 170, 0.2);
        }
        
        .color-tag.food {
            background-color: rgba(244, 67, 54, 0.1);
            color: #F44336;
            border: 1px solid rgba(244, 67, 54, 0.2);
        }
        
        .color-tag.travel {
            background-color: rgba(255, 152, 0, 0.1);
            color: #FF9800;
            border: 1px solid rgba(255, 152, 0, 0.2);
        }
        
        .color-tag:hover, .color-tag.active {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        
        /* 3. 带图标签 */
        .image-tag {
            background-color: white;
            border: 1px solid var(--light-gray);
            padding: 4px 12px;
        }
        
        .image-tag img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .image-tag:hover, .image-tag.active {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* 4. 带数字标签 */
        .count-tag {
            background-color: white;
            border: 1px solid var(--light-gray);
        }
        
        .tag-count {
            display: inline-block;
            padding: 1px 6px;
            background-color: var(--light-gray);
            color: var(--gray);
            border-radius: 10px;
            font-size: 12px;
            margin-left: 4px;
        }
        
        .count-tag:hover, .count-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .count-tag:hover .tag-count, .count-tag.active .tag-count {
            background-color: white;
            color: var(--primary);
        }
        
        /* 5. 简约边框标签 */
        .border-tag {
            background-color: transparent;
            border: 1px solid var(--light-gray);
            color: var(--gray);
        }
        
        .border-tag:hover, .border-tag.active {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* 6. 大型标签 */
        .large-tag {
            padding: 10px 20px;
            font-size: 16px;
            background-color: white;
            border: 1px solid var(--light-gray);
        }
        
        .large-tag:hover, .large-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 7. 标签云 */
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 16px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
        }
        
        .cloud-tag {
            background-color: var(--light);
            color: var(--gray);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        
        .cloud-tag.size-sm {
            font-size: 12px;
        }
        
        .cloud-tag.size-md {
            font-size: 14px;
        }
        
        .cloud-tag.size-lg {
            font-size: 16px;
            font-weight: 500;
        }
        
        .cloud-tag.size-xl {
            font-size: 18px;
            font-weight: 600;
        }
        
        .cloud-tag:hover, .cloud-tag.active {
            background-color: var(--primary);
            color: white;
            transform: scale(1.05);
        }
        
        /* 8. 水平滚动标签 */
        .scrollable-tags {
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: none;
        }
        
        .scrollable-tags::-webkit-scrollbar {
            display: none;
        }
        
        .horizontal-tags {
            display: flex;
            gap: 10px;
            min-width: max-content;
        }
        
        .scroll-tag {
            background-color: white;
            border: 1px solid var(--light-gray);
            white-space: nowrap;
        }
        
        .scroll-tag:hover, .scroll-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--light-gray);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 10px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 标签内容区域 */
        .tag-content {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: var(--card-shadow);
            display: none;
        }
        
        .tag-content.active {
            display: block;
        }
        
        .tag-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .tag-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: rgba(66, 133, 244, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 20px;
        }
        
        .tag-info h3 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .tag-meta {
            font-size: 13px;
            color: var(--gray);
        }
        
        .tag-desc {
            font-size: 15px;
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        .tag-posts {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">标签广场</div>
        <button class="nav-btn" id="searchBtn">
            <i class="fas fa-search"></i>
        </button>
    </div>
    
    <div class="container">
        <!-- 标签样式切换 -->
        <div class="style-tabs">
            <button class="style-tab active" data-view="all">全部</button>
            <button class="style-tab" data-view="popular">热门</button>
            <button class="style-tab" data-view="following">已关注</button>
        </div>
        
        <!-- 1. 圆角填充标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>推荐标签</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-list">
                <div class="tag filled-tag active">
                    <i class="fas fa-fire"></i> 热门话题
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-music"></i> 音乐
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-film"></i> 电影
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-book"></i> 读书
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-gamepad"></i> 游戏
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-utensils"></i> 美食
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-plane"></i> 旅行
                </div>
                <div class="tag filled-tag">
                    <i class="fas fa-dumbbell"></i> 健身
                </div>
            </div>
        </div>
        
        <!-- 2. 彩色分类标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>分类标签</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-list">
                <div class="tag color-tag tech active">#人工智能</div>
                <div class="tag color-tag tech">#区块链</div>
                <div class="tag color-tag tech">#元宇宙</div>
                
                <div class="tag color-tag life">#生活技巧</div>
                <div class="tag color-tag life">#家居装饰</div>
                <div class="tag color-tag life">#宠物日常</div>
                
                <div class="tag color-tag entertainment">#明星八卦</div>
                <div class="tag color-tag entertainment">#综艺吐槽</div>
                <div class="tag color-tag entertainment">#追剧指南</div>
                
                <div class="tag color-tag food">#美食探店</div>
                <div class="tag color-tag food">#家常菜</div>
                <div class="tag color-tag food">#烘焙教程</div>
                
                <div class="tag color-tag travel">#小众景点</div>
                <div class="tag color-tag travel">#旅行攻略</div>
                <div class="tag color-tag travel">#城市漫步</div>
            </div>
        </div>
        
        <!-- 3. 带图标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>兴趣圈子</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-list">
                <div class="tag image-tag active">
                    <img src="https://picsum.photos/id/237/100/100" alt="宠物"> 宠物圈
                </div>
                <div class="tag image-tag">
                    <img src="https://picsum.photos/id/96/100/100" alt="摄影"> 摄影圈
                </div>
                <div class="tag image-tag">
                    <img src="https://picsum.photos/id/292/100/100" alt="穿搭"> 穿搭圈
                </div>
                <div class="tag image-tag">
                    <img src="https://picsum.photos/id/431/100/100" alt="数码"> 数码圈
                </div>
                <div class="tag image-tag">
                    <img src="https://picsum.photos/id/493/100/100" alt="美妆"> 美妆圈
                </div>
                <div class="tag image-tag">
                    <img src="https://picsum.photos/id/365/100/100" alt="运动"> 运动圈
                </div>
            </div>
        </div>
        
        <!-- 4. 带数字标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>热门话题</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-list">
                <div class="tag count-tag active">
                    科技峰会 <span class="tag-count">2.4k</span>
                </div>
                <div class="tag count-tag">
                    音乐节 <span class="tag-count">1.8k</span>
                </div>
                <div class="tag count-tag">
                    电影节 <span class="tag-count">1.5k</span>
                </div>
                <div class="tag count-tag">
                    新书发布 <span class="tag-count">986</span>
                </div>
                <div class="tag count-tag">
                    马拉松 <span class="tag-count">754</span>
                </div>
                <div class="tag count-tag">
                    美食节 <span class="tag-count">1.2k</span>
                </div>
            </div>
        </div>
        
        <!-- 5. 简约边框标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>行业标签</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-list">
                <div class="tag border-tag active">互联网</div>
                <div class="tag border-tag">金融</div>
                <div class="tag border-tag">教育</div>
                <div class="tag border-tag">医疗</div>
                <div class="tag border-tag">法律</div>
                <div class="tag border-tag">媒体</div>
                <div class="tag border-tag">艺术</div>
                <div class="tag border-tag">设计</div>
                <div class="tag border-tag">建筑</div>
                <div class="tag border-tag">制造</div>
            </div>
        </div>
        
        <!-- 6. 大型标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>活动标签</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-list">
                <div class="tag large-tag active">城市马拉松</div>
                <div class="tag large-tag">科技创新展</div>
                <div class="tag large-tag">国际电影节</div>
                <div class="tag large-tag">音乐节</div>
            </div>
        </div>
        
        <!-- 7. 标签云 -->
        <div class="tag-section">
            <div class="section-title">
                <span>兴趣标签云</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="tag-cloud">
                <div class="cloud-tag size-xl active">摄影</div>
                <div class="cloud-tag size-lg">咖啡</div>
                <div class="cloud-tag size-md">骑行</div>
                <div class="cloud-tag size-sm">园艺</div>
                <div class="cloud-tag size-lg">阅读</div>
                <div class="cloud-tag size-md">绘画</div>
                <div class="cloud-tag size-xl">音乐</div>
                <div class="cloud-tag size-sm">手工</div>
                <div class="cloud-tag size-md">登山</div>
                <div class="cloud-tag size-lg">电影</div>
                <div class="cloud-tag size-sm">陶艺</div>
                <div class="cloud-tag size-md">瑜伽</div>
                <div class="cloud-tag size-lg">美食</div>
                <div class="cloud-tag size-sm">编程</div>
                <div class="cloud-tag size-md">旅行</div>
            </div>
        </div>
        
        <!-- 8. 水平滚动标签 -->
        <div class="tag-section">
            <div class="section-title">
                <span>推荐关注</span>
                <span class="view-all">查看全部</span>
            </div>
            <div class="scrollable-tags">
                <div class="horizontal-tags">
                    <div class="tag scroll-tag active">#职场经验分享</div>
                    <div class="tag scroll-tag">#副业赚钱攻略</div>
                    <div class="tag scroll-tag">#理财小白入门</div>
                    <div class="tag scroll-tag">#自媒体运营</div>
                    <div class="tag scroll-tag">#远程工作</div>
                    <div class="tag scroll-tag">#自由职业</div>
                    <div class="tag scroll-tag">#创业经验</div>
                    <div class="tag scroll-tag">#职场人际关系</div>
                    <div class="tag scroll-tag">#职业规划</div>
                </div>
            </div>
        </div>
        
        <!-- 标签内容示例 -->
        <div class="tag-content active" id="tagContent">
            <div class="tag-header">
                <div class="tag-avatar">
                    <i class="fas fa-fire"></i>
                </div>
                <div class="tag-info">
                    <h3>热门话题</h3>
                    <div class="tag-meta">12.5k 帖子 · 34.2k 关注</div>
                </div>
            </div>
            
            <div class="tag-desc">
                汇聚全网最热门的讨论话题，了解当下最受关注的事件和趋势，参与精彩讨论，分享你的观点和见解。
            </div>
            
            <div class="tag-posts">
                <div class="fw-bold mb-2">最新帖子</div>
                <p>• 2023年最值得期待的科技产品有哪些？</p>
                <p>• 如何看待当前的就业市场趋势？</p>
                <p>• 分享你最近发现的宝藏旅行地</p>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-tags nav-icon"></i>
            <span>标签</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle nav-icon"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签点击交互
        const allTags = document.querySelectorAll('.tag, .cloud-tag, .scroll-tag');
        allTags.forEach(tag => {
            tag.addEventListener('click', function() {
                // 如果是同一组内的标签，先移除其他标签的active类
                const parentList = this.closest('.tag-list, .tag-cloud, .horizontal-tags');
                if (parentList) {
                    parentList.querySelectorAll('.tag, .cloud-tag, .scroll-tag').forEach(t => {
                        t.classList.remove('active');
                    });
                }
                
                // 给当前点击的标签添加active类
                this.classList.add('active');
                
                // 更新标签内容区域
                const tagContent = document.getElementById('tagContent');
                const tagName = this.textContent.trim().replace(/#| .*/g, ''); // 提取标签名称
                const tagAvatar = tagContent.querySelector('.tag-avatar i');
                
                // 更新标题和元数据（实际应用中会根据标签ID请求数据）
                tagContent.querySelector('.tag-info h3').textContent = tagName;
                tagContent.querySelector('.tag-meta').textContent = 
                    `${(Math.random() * 10 + 1).toFixed(1)}k 帖子 · ${(Math.random() * 30 + 5).toFixed(1)}k 关注`;
                
                // 随机更换图标
                const icons = ['fa-fire', 'fa-music', 'fa-film', 'fa-book', 'fa-gamepad', 'fa-utensils', 'fa-plane'];
                const randomIcon = icons[Math.floor(Math.random() * icons.length)];
                tagAvatar.className = `fas ${randomIcon}`;
                
                // 显示标签内容
                tagContent.classList.add('active');
                
                // 滚动到标签内容区域
                tagContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
        });
        
        // 样式切换标签
        const styleTabs = document.querySelectorAll('.style-tab');
        styleTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的active类
                styleTabs.forEach(t => t.classList.remove('active'));
                // 给当前点击的标签添加active类
                this.classList.add('active');
                
                const viewType = this.getAttribute('data-view');
                // 在实际应用中，这里会根据视图类型筛选标签
                alert(`已切换到${viewType === 'all' ? '全部' : viewType === 'popular' ? '热门' : '已关注'}标签视图`);
            });
        });
        
        // 导航按钮交互
        document.getElementById('backBtn').addEventListener('click', () => {
            alert('返回上一页');
        });
        
        document.getElementById('searchBtn').addEventListener('click', () => {
            alert('搜索标签');
        });
        
        // 查看全部按钮
        const viewAllBtns = document.querySelectorAll('.view-all');
        viewAllBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const sectionTitle = this.parentElement.querySelector('span:first-child').textContent;
                alert(`查看全部${sectionTitle}`);
            });
        });
    </script>
</body>
</html>
